<template>
  <section>
    <page-one v-show="true || page === 1" :contractDetail="contractDetail"></page-one>
    <page-two v-show="true || page === 2" :contractDetail="contractDetail"></page-two>
    <page-three v-show="true || page === 3" :contractDetail="contractDetail"></page-three>
    <page-four v-show="true || page === 4" :contractDetail="contractDetail"></page-four>
    <page-five v-show="true || page === 5" :contractDetail="contractDetail"></page-five>
    <page-six v-show="true || page === 6" :contractDetail="contractDetail"></page-six>
    <page-seven v-show="true || page === 7" :contractDetail="contractDetail"></page-seven>
    <page-eight v-show="true || page === 8" :contractDetail="contractDetail"></page-eight>
    <page-nine v-show="true || page === 9" :contractDetail="contractDetail"></page-nine>
    <page-ten v-show="true || page === 10" :contractDetail="contractDetail"></page-ten>
      <!-- <button class="preB" @click="preB(page)" :disabled="page===1">前</button>
    <button class="backB" @click="backB(page)" :disabled="page===10">后</button>   -->
  </section>
</template>
<script>
import pageOne from './contractOne'
import pageTwo from './contractTwo'
import pageThree from './contractThree'
import pageFour from './contractFour'
import pageFive from './contractFive'
import pageSix from './contractSix'
import pageSeven from './contractSeven'
import pageEight from './contractEight'
import pageNine from './contractNine'
import pageTen from './contractTen'
export default {
  props: {
    contractDetail: {
      required: true,
      type: Object,
      default: {
        contractPersons: {},
        housePersons: {},
        landlord: {},
        order: {},
        render: {},
        romm: {}
      }
    }
  },
  components: {
    pageOne,
    pageTwo,
    pageThree,
    pageFour,
    pageFive,
    pageSix,
    pageSeven,
    pageEight,
    pageNine,
    pageTen
  },
  data () {
    return {
      page: 1
    }
  },
  methods: {
    preB (page) {
      this.page--
    },
    backB (page) {
      this.page++
    }
  }
}
</script>

<style scoped lang="less">
  section{
    // -webkit-overflow-scrolling: touch;
  }
  .preB,.backB{
    position:relative;
    bottom:0;
    width: 45%;
    height: 30px;
    background-color:#ff9600;
    border-radius: 5px;
  }
  .preB{
     margin-left:0.4%;
  }
</style>
